<script lang="ts" setup>
import {type Ref, ref, onMounted} from "vue";
import Nav_bottom from "@/componets/nav/nav_bottom";
import {goHanfuDe} from "@/util/go"
import {getHanfuTypeList} from "@/api/hanfu/hanfuType"
import {getHanfu, type HanfuQuery} from "@/api/hanfu/hanfu"
import {baseUrl} from "@/api/http"
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {onReachBottom, onShareAppMessage, onShareTimeline} from "@dcloudio/uni-app";
const currentCategory = ref(0);

const query:Ref<HanfuQuery> = ref({
  hanFuTypeName: "",
  pageNum: 1,
  hanFuTypeId: 0,
  pageSize: 10,
  hanFuName: "",
  hanFuStatus: 1
})

const selectCategory = (index: number) => {
  currentCategory.value = index;
  query.value["hanFuTypeId"] = index
  query.value["pageNum"] = 1
  hanfuList.value = []
  getHanfuList()
};

const handleProductClick = (product: any) => {
  goHanfuDe(product.id)
};

const typeList = ref([{
  hanfuTypeName: "全部",
  hanfuTypeId: 0
}])

const hanfuList = ref([])

const getTypeList = () => {
  getHanfuTypeList().then(res  => {
    typeList.value.push(...res.data.data.data)
  })
}

const getHanfuList = () => {
  getHanfu(query.value).then(res => {
    hanfuList.value.push(...res.data["data"].data.records)
    query.value["pageNum"] = query.value["pageNum"] + 1
  })
}

const Search = () => {
  query.value["pageNum"] = 1
  hanfuList.value = []
  getHanfuList()
}

onReachBottom(() => {
  getHanfuList()
})

// 分享给朋友
  onShareAppMessage(() => ({
    title: '如初国风馆',
    path: '/pages/index/index', // 替换为你的页面路径
    imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  // 分享到朋友圈
  onShareTimeline(() => ({
  	  title: '如初国风馆',
  	  path: '/pages/index/index', // 替换为你的页面路径
  	  imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  
getHanfuList()
getTypeList()
</script>

<template>
  <view class="container">
    <!-- 顶部搜索区域 -->
    <view class="header">
      <view class="title-bar">
        <text class="title">汉服</text>
      </view>
      <view class="search-box">
        <uni-icons type="search" size="20" color="#999999" />
        <input type="text" v-model="query.hanFuName" placeholder="输入汉服名称" placeholder-class="placeholder" />
		<button type="primary" size="mini" @click="Search">搜索</button>
      </view>
    </view>
    <!-- 分类标签栏 -->
    <scroll-view class="category-scroll" scroll-x>
      <view class="category-list">
        <view
          v-for="(item, index) in typeList"
          :key="index"
          :class="['category-item', currentCategory === item['hanfuTypeId'] ? 'active' : '']"
          @tap="selectCategory(item['hanfuTypeId'])"
        >
          {{ item["hanfuTypeName"] }}
        </view>
      </view>
    </scroll-view>
	
	<!--这里写空状态-->
	<view class="product-item empty-state" v-if="hanfuList.length === 0">
	      <uni-icons type="info" size="60" color="#42b983" />
	      <text class="empty-title">未找到相关汉服</text>
	      <text class="empty-subtitle">换个关键词试试吧</text>
	</view>
	
    <!-- 商品列表区域 -->
    <scroll-view class="product-scroll" scroll-y>
      <view class="product-grid">
        <template v-if="hanfuList.length">
          <view
            v-for="(item, index) in hanfuList"
            :key="index"
            class="product-item cursor-pointer"
            @tap="handleProductClick(item)"
          >
            <image :src="baseUrl + item.image" mode="scaleToFill" />
            <view class="product-info">
              <text class="product-name">{{ item.name }}</text>
            </view>
          </view>
        </template>


      </view>
    </scroll-view>



  </view>
  
  <nav_bottom :index="1"></nav_bottom>
</template>

<style scoped lang="scss">

.container {
  padding-top: 90rpx;
  height: 98vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
}
.header {
  padding: 20rpx;
  background-color: #ffffff;
}
.title-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}
.icons {
  display: flex;
  gap: 20rpx;
}
.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 16rpx 24rpx;
  border-radius: 8rpx;
}
.search-box input {
  flex: 1;
  margin-left: 16rpx;
  font-size: 28rpx;
}
.placeholder {
  color: #999999;
}
.category-scroll {
  background-color: #ffffff;
  padding: 0 20rpx;
}
.category-list {
  display: flex;
  padding: 20rpx 0;
  white-space: nowrap;
}
.category-item {
  padding: 12rpx 32rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #666666;
  position: relative;
}
.category-item.active {
  color: #42b983;
}
.category-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #42b983;
  border-radius: 2rpx;
}
.product-scroll {
  flex: 1;
  padding-bottom: 200rpx;
  overflow: auto;
}
.product-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  justify-content: space-around;
}
.product-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  margin: 10rpx 0;
  overflow: hidden;
  min-width: 320rpx;
  max-width: 320rpx;
  box-shadow: 1px 5px 5px rgba(175, 175, 175, 0.5);
}
.product-item image {
  width: 100%;
  height: 230px;
  object-fit: cover;
}
.product-info {

  padding: 16rpx;
}
.product-name {
  font-size: 28rpx;
  color: #333333;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  text-align: center;
  width: 80%;
  margin: 50px auto;
  .empty-title {
    font-size: 32rpx;
    color: #333;
    margin: 20rpx 0 10rpx;
    font-weight: 500;
  }

  .empty-subtitle {
    font-size: 28rpx;
    color: #999;
  }
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  padding: 16rpx 0;
  background-color: #ffffff;
  border-top: 2rpx solid #f0f0f0;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 24rpx;
  color: #666666;
}
.tab-item.active {
  color: #42b983;
}


</style>
